<template>
  <div>
    <!-- 表单 -->
    <el-form ref="form" :model="music" label-width="80px">
      <el-form-item label="歌名">
        <el-input v-model="music.name" />
      </el-form-item>
      <el-form-item label="艺术家">
        <el-input v-model="music.artist" />
      </el-form-item>
      <el-form-item label="链接">
        <el-input v-model="music.url" />
      </el-form-item>
      <!-- <el-form-item label="封面">
        <el-input v-model="music.cover" />
      </el-form-item> -->
      <el-form-item label="封面">
        <!-- <el-input v-model="blog.blogImage" /> -->
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :headers="headers"
          :on-success="uploadSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>

      <el-form-item label="歌词">
        <el-input v-model="music.lrc" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// 引入接口API
import musicApi from '@/api/music'

// import Tinymce from '@/components/Tinymce/index'
import { getToken } from '@/utils/auth'

export default {
  props: {
    music: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      imageUrl: this.blogImage, // 上传图片回显
      // 设置上传文件的请求头
      headers: {
        Authorization: getToken()
      },
      // 从全局变量中去数据
      uploadUrl: process.env.VUE_APP_UPLOAD_URL, // 上传图片路径
      typeList: this.$store.getters.typeList
    }
  },
  // 监听器 监听图片路径 监听器这里的function不能使用箭头函数替代
  watch: {
    'music.cover': function(newVal, oldVal) {
      this.imageUrl = newVal
    }
  },
  methods: {
    onSubmit() {
      musicApi.update(this.music).then(Response => {
        this.$message.success(Response.msg)
        this.$emit('closeUpdateDialog')
        this.$emit('getmusicList')
      })
    },
    uploadSuccess(res, file) {
      this.$message.success(res.msg)
      // 图片回显
      this.imageUrl = res.data
      // 图片路径提交
      this.music.cover = res.data
    }
  }
}
</script>

